<template>
  <view class="home-banner">
    <up-swiper
      :list="bannerList"
      indicator
      indicator-mode="dot"
      indicator-size="large"
      indicator-active-color="#ffffff"
      indicator-inactive-color="rgba(255, 255, 255, 0.5)"
      @change="handleSwiperChange"
      @click="handleSwiperClick"
      :height="300"
      :autoplay="isAutoplay"
      :interval="3000"
      class="home-banner-swiper"
      radius="0"
      :duration="500"
      lazy-load
    >
    </up-swiper>
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
const props = defineProps({
  //是否自动播放
  isAutoplay: {
    type: Boolean,
    default: true,
  },
});
const bannerList = ref([
  "/static/banner/1.png",
  "/static/banner/2.png",
  "/static/banner/3.png",
  "/static/banner/4.png",
]);

const handleSwiperChange = (current: number) => {
  // console.log("轮播图切换到:", current);
};

const handleSwiperClick = (index: number) => {
  // console.log("点击了轮播图:", index);
};
</script>

<style lang="scss" scoped>
.home-banner {
  width: 100%;
  height: auto;
  .home-banner-swiper {
    position: relative;
  }
}
</style>
